<template>
  <div>
    <div class="strut-div">
      <div class="clear-float">
        <div class="card-item" style="height: 312px; width: 615px;">
          <p class="card-title">游客投诉渠道</p>
          <div class="card-div" style="height: 258px;">
            <common-pieNew-chart ref="complaintChannel" :config="complaintChannelConfig"></common-pieNew-chart>
          </div>
        </div>
        <div class="card-item" style="height: 312px; width: 615px;float: right;">
          <p class="card-title">游客投诉类型</p>
          <div class="card-div" style="height: 258px;">
            <el-row :gutter="20">
              <el-col :span="6">
                <div class="tourist-complaint">
                  <p class="tourist-complaint-name">餐饮质量</p>
                  <p class="tourist-complaint-number lcd-font">3678</p>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="tourist-complaint">
                  <p class="tourist-complaint-name">导游服务</p>
                  <p class="tourist-complaint-number lcd-font">3678</p>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="tourist-complaint">
                  <p class="tourist-complaint-name">住宿服务</p>
                  <p class="tourist-complaint-number lcd-font">3678</p>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="tourist-complaint">
                  <p class="tourist-complaint-name">环境设施</p>
                  <p class="tourist-complaint-number lcd-font">3678</p>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="tourist-complaint">
                  <p class="tourist-complaint-name">旅游交通</p>
                  <p class="tourist-complaint-number lcd-font">3678</p>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="tourist-complaint">
                  <p class="tourist-complaint-name">不实宣传</p>
                  <p class="tourist-complaint-number lcd-font">3678</p>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="tourist-complaint">
                  <p class="tourist-complaint-name">旅游安全</p>
                  <p class="tourist-complaint-number lcd-font">3678</p>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="tourist-complaint">
                  <p class="tourist-complaint-name">旅游购物</p>
                  <p class="tourist-complaint-number lcd-font">3678</p>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>

      <div class="card-item" style="height: 324px; width: 100%; margin-top: 20px;">
        <p class="card-title">全域游客投诉数量分析</p>
        <div class="card-div" style="height: 270px;">
          <common-dualarea-chart ref="complaintNum" :config="complaintNumConfig"></common-dualarea-chart>
        </div>
      </div>

      <div class="card-item" style="height: 324px; width: 100%;margin-top: 20px;">
        <p class="card-title">全域游客投诉对象分析</p>
        <div class="card-div" style="height: 270px;">
          <common-bar-chart ref="complaintObj" :config="complaintObj"></common-bar-chart>
        </div>
      </div>

      <div class="card-item" style="height: 339px; width: 100%;margin-top: 20px;">
        <p class="card-title">全域旅游产业监测数据</p>
        <div class="card-div" style="height: 286px;">
          <div class="monitor-data" style="float: left;">
            <el-radio-group v-model="radio" size="small">
              <el-radio label="1" border>酒店</el-radio>
              <br />
              <el-radio label="2" border>KTV</el-radio>
              <br />
              <el-radio label="3" border>公共场所</el-radio>
              <br />
              <el-radio label="4" border>景区</el-radio>
              <br />
              <el-radio label="5" border>旅行社</el-radio>
            </el-radio-group>
          </div>
          <div style="float: right; width: 1050px; height: 266px; margin:20px 24px 0 0;">
            <common-table ref="monitorTable" :config="monitorConfig"></common-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import CommonPieNewChart from '@/components/common/common-pieNew-chart.vue';
import CommonDualareaChart from '@/components/common/common-dualarea-chart.vue';
import CommonBarChart from '@/components/common/common-bar-chart.vue';
  import CommonTable from '@/components/common/common-table.vue'
export default {
  components: {
    CommonPieNewChart,
    CommonDualareaChart,
    CommonBarChart,
    CommonTable
  },
  data() {
    return {
      radio:'1',
      complaintChannelConfig: {
        request: {
          url: 'url',
          params: {}
        },
        option: {
          id: 'complaintChannelPie',
          title: '',
          color: ['#6C43F7', '#EDA652', '#3EA2FE', '#77F7E7', '#839DE7', '#7CCAA2'],
          legend: {
            show: false,
            left: '72%',
            top: '20%',
            orient: 'horizontal',
            textStyle: {
              color: '#fff',
              fontSize: 15
            },
            data: ['信件投诉', '媒体曝光', '电话投诉', '12345', '12301', '上门投诉']
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} {b}<br/> {c}%'
          },
          series: [
            {
              name: '',
              type: 'pie',
              radius: ['35%', '70%'],
              center: ['50%', '50%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: true,
                  position: 'top',
                  formatter: '{b}\n{c}%',
                  fontSize: '17'
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '17',
                    fontWeight: 'bold'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: true
                }
              },
              data: [
                { value: 10.43, name: '信件投诉' },
                { value: 28.24, name: '媒体曝光' },
                { value: 24.77, name: '电话投诉' },
                { value: 11.56, name: '12345' },
                { value: 6.56, name: '12301' },
                { value: 18.44, name: '上门投诉' }
              ]
            }
          ]
        }
      },
      complaintNumConfig: {
        request: {
          url: 'url',
          params: {}
        },
        option: {
          id: 'complaintNumArea',
          x: ['2019-01', '2019-02', '2019-03', '2019-04', '2019-05', '2019-06', '2019-07', '2019-08', '2019-09', '2019-10', '2019-11', '2019-12'],
          y: [
            {
              axis: {
                min: 0,
                max: 20,
                name: '千'
              },
              title: '',
              data: [9.3, 6.2, 8.2, 7.3, 6.8, 13.4, 15.2, 6, 14.5, 9.2, 8.2, 10.1],
              startColor: '#77F7E7',
              endColor: 'rgba(119, 247, 231, 0)'
            }
          ]
        }
      },
      complaintObj: {
        request: {
          url: 'url',
          params: {}
        },
        option: {
          id: 'complaintObjBar',
          yName: '次',
          xAxis: ['旅游企业', '旅游场所', '风情小镇', '农家乐', '民宿', '餐馆', '乡村旅游', '旅行社', '酒店', '景区', '购物商店'],
          y: [
            {
              axis: {
                min: 0,
                max: 7000,
                name: '次'
              },
              title: '',
              data: [2775, 3170, 3565, 4750, 5145, 6886, 6564, 4893, 4665, 2625, 1686],
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#2764E2' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#62FFEB' // 100% 处的颜色
                  }
                ]
              },
              stack: '1'
            }
          ]
        }
      },
      monitorConfig:{
        	request: {
        		url: "url",
        		params: {

        		}
        	},
        	option: {
        		height: 260,
        		tableColor: '#FBCC13',
        		tableHeader: [{
        			prop: "num",
        			title: "序号",
        		}, {
        			prop: "province",
        			title: "要素名称",
        		}, {
        			prop: "touristNum",
        			title: "级别",
        		},{
        			prop: "percentage",
        			title: "类型",
        		},{
        			prop: "phone",
        			title: "电话",
        		},{
        			prop: "adress",
        			title: "地址",
        		}],
        		tableData:[
        			{num:'1',province:"吉林",touristNum:12415,percentage:"11.2%"},
              {num:'2',province:"福建",touristNum:11244,percentage:"10.1%"},
              {num:'3',province:"河北",touristNum:9923,percentage:"9.01%"},
              {num:'4',province:"黑龙江",touristNum:9408,percentage:"8.23%"},
              {num:'5',province:"内蒙古",touristNum:9022,percentage:"7.89%"},
              {num:'6',province:"贵州",touristNum:8088,percentage:"6.99%"},
              {num:'7',province:"江西",touristNum:7765,percentage:"6.72%"},
              {num:'8',province:"广西",touristNum:7444,percentage:"6.3%"},
              {num:'9',province:"河南",touristNum:7123,percentage:"6.01%"},
              {num:'10',province:"陕西",touristNum:6548,percentage:"5.55%"},
        			]
        	},
        },
    };
  },
  mounted() {
    this.$refs.complaintChannel.initChart();
    this.$refs.complaintNum.initChart();
    this.$refs.complaintObj.initChart();
    this.$refs.monitorTable.initTable();
  }
};
</script>

<style lang="scss" type="text/scss">
  .tourist-complaint {
  margin-top: 40px;
  text-align: center;
  > .tourist-complaint-name {
    color: #6beeff;
    font-size: 18px;
    margin-bottom: 10px;
  }
  > .tourist-complaint-number {
    font-size: 44px;
  }
}
.monitor-data {
  .el-radio-group {
    margin-top: 30px;
  }
  .el-radio__input {
    display: none;
  }
  .is-checked {
    border-color:rgba(130,100,230,1) !important;
    background:linear-gradient(90deg,rgba(108,67,247,1),rgba(180,158,255,1));
  }
  .el-radio {
    margin: 0px 16px 12px 30px;
    width: 130px;
    height: 36px;
    padding: 0;
    text-align:center;
    border-color:rgba(130,100,230,1);

    .el-radio__label {
      padding: 0;
      font-size: 20px;
      line-height: 36px;
      color: #FFF !important;
    }
  }
}
</style>
